<template>
  <a-layout class="pageAll">
    <a-page-header
        title="添加链接"
        style="border: 1px solid rgb(235, 237, 240)"
        sub-title="添加链接，设置参数"
    > </a-page-header>
<!--  内容  -->
    <div style="padding-left: 15px;padding-right: 15px">
      <div class="flex-row-start-center plr15" style="margin-top: 30px">
        <div>链接主体</div>
        <div style="flex: 1;margin-left: 20px">
          <a-input :disabled="true" v-model:value="submit.url" placeholder="请输入链接，参数已固定部分"/>
        </div>
        <a-button style="margin-left: 30px" class="input-btn">测试参数</a-button>
      </div>
      <!--    切割参数  -->
      <div class="flex-row-start-center plr15 mt10">
        <div>切割参数</div>
        <div style="flex: 1;margin-left: 20px">
          <a-input v-model:value="cutParam" placeholder="请输入需要配置参数的部分，切割后配置参数，也可在下方自行增加"/>
        </div>
        <a-button style="margin-left: 30px" class="input-btn" @click="cutParamClick">切割</a-button>
      </div>
      <div class="flex-row-start-center plr15 mt10">
        <div>下载地址</div>
        <div style="flex: 1;margin-left: 20px">
          <a-input v-model:value="submit.url" placeholder="请输入app下载链接"/>
        </div>
        <a-button style="margin-left: 30px" class="input-btn">测试下载</a-button>
      </div>

      <div class="flex-row-start-center">
        <div style="margin-top: 30px; margin-bottom: 30px;font-size: 20px;font-weight:bold">在下方绑定字段</div>
        <a-button style="margin-left: 30px" @click="addParam">增加参数</a-button>
      </div>
      <!--      列表-->
      <div class="m-table">
        <a-table :data-source="dataSource" :columns="columns" :bordered="true" :pagination="false">
          <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.key == 'name'">
              <a-input v-model:value="record.paramKey" style="text-align: center"/>
            </template>
            <template v-if="column.key == 'param'">
              <div>
                <div class="flex-row-start-center lay-out-full">
                  <div class="type-item-title">参数类型：</div>
                  <a-input-group class="ml15" style="width: 150px;">
                    <a-select style="width: 100%" v-model:value = "record.type" @change="paramTypeChange($event,record)">
                      <a-select-option v-for="(item,index) in paramTypes" :key="index" :value="item.type">{{ item.desc }}</a-select-option>
                    </a-select>
                  </a-input-group>
                  <!-- 数据库类型-->
                  <a-input-group class="key-input lay-out-full ml15" v-if="record.type == 'database'">
                    <a-select style="width: 100%" v-model:value = "record.key" @change="dbKeysChange($event,record)">
                      <a-select-option v-for="(db,idx) in dbKeys" :key="idx" :value="db.key">{{ db.desc }}</a-select-option>
                    </a-select>
                  </a-input-group>
                  <!--       非数据库类型           -->
                  <a-input v-else v-model:value="record.key" class="key-input lay-out-full ml15"></a-input>
                </div>
                <!--             编码类型-->
                <div class="flex-row-start-center lay-out-full mt10">
                  <div class="type-item-title">编码类型：</div>
                  <a-input-group class="lay-out-full ml15">
                    <a-select style="width: 100%;" v-model:value = "record.encode" @change="encodeChange($event,record)">
                      <a-select-option  v-for="(item,index) in encodeTypes" :key="index" :value="item.value">{{ item.desc }}</a-select-option>
                    </a-select>
                  </a-input-group>
                </div>
              </div>
            </template>
            <template v-if="column.key == 'value'">
              <a-input v-model:value="record.value" :allow-clear="true"/>
            </template>
            <!--     操作     -->
            <template v-if="column.key == 'option'">
              <div class="flex-row-start-center flex-center">
                <a-button type="primary" @click="lockParam(record)">{{record.inLock?'取消锁定':'锁定'}}</a-button>
                <a-button class="ml15" type="primary" :disabled="record.inLock" @click="deleteParam(record,index)">删除</a-button>
              </div>
            </template>
          </template>
        </a-table>
      </div>
      <!--保存按钮-->
      <div>
        <a-button type="primary" style="margin: 40px" @click="saveLink">保存</a-button>
      </div>
    </div>
  </a-layout>
</template>

<script>
import {getCustomerParam} from "@/utils/api";

export default {
  name: "add-link",
  data() {
    return {
      submit: {
        url: '',
      },
      cutParam:"http://api.qianyichuanmei.com.cn/api/ocpx/click?fid=288257&ost=1&rid=__request_id__&cb=__callback__&ua=__user_agent__&tms=__tms__&ip=__ip__&idfa=__idfa__&idfamd5=__idfa_md5__",///切割参数输入框
      ///参数对象模板
      templateObj: {
        type:"database"
      },
      paramTypeEnum: {
        DATABASE:"database",
        UUID:"uuid",
        CALL:"call",
        TIME:"timestamp"
      },
      ///字段类型
      paramTypes:[
        {type:"database",desc:"数据库"},
        {type:"uuid",desc:"UUID"},
        {type:"call",desc:"回调"},
        {type:"timestamp",desc:"时间戳"},
      ],
      dbKeys: [
        {key:'ip',desc: 'ip'},
        {key:'ua',desc: 'ua'},
        {key:'idfa',desc: 'idfa'},
        {key:'ip',desc: 'ip'},
      ],
      encodeTypeEnum: {
        MD5LOW:"low",
        MD5UP:"up",
        MD5:"md5",
        URLENCODED:"urlencode"
      },
      //编码类型
      encodeTypeValue:"",
      /*编码类型*/
      encodeTypes:[
        {value:"",desc:"空"},
        {value:"low",desc:"MD5小写"},
        {value:"up",desc:"MD5大写"},
        {value:"urlencode",desc:"url编码"}
      ],
      dataSource: [],
      databaseKeys:[],
      columns: [
        {
          title: '链接字段',
          dataIndex: 'name',
          key: 'name',
          width: '120px'
        },
        {
          title: "配置字段",
          dataIndex: 'param',
          key: 'param',
        },{
          title: "值",
          dataIndex: 'value',
          width: '200px',
          key: 'value'
        },{
          title: "操作",
          dataIndex: 'option',
          key: 'option'
        }
      ]
    }
  },
  mounted() {
    this.getUploadParam()
  },
  methods: {
    /*获取系统的参数*/
    getUploadParam() {
      // 获取上报参数
      getCustomerParam().then(res => {
        let data = res.data.data;
        if (data && data.length > 0) {
          this.databaseKeys = data
        }
      },fail => {

      })
    },
    /*
    * 增加参数
    * */
    addParam() {
      this.dataSource.push({//增加一个空行
        name: "",
        param: "",
        md5: false,
        use: true,
        isAdd: true
      })
    },
    /*切割参数*/
    cutParamClick(){
      var maiPartArr = this.cutParam.split("?")
      var param = ""
      if (maiPartArr.length == 2) {
        this.submit.url = maiPartArr[0]
        param = maiPartArr[1]
      }else {
        return this.$message.error("链接有错误，请检查")
      }
      let arr = param.split("&")
      let tempArr = [];
      arr.forEach(item => {
        if (item.length > 0 && item.indexOf("=") > 0) {
          let c = item.split("=");
          if (c.length > 0) {
            let key = c[0]
            var value = "";
            if (c.length == 2) {
              value = c[1];
            }
            let obj = {
              type: this.paramTypeEnum.DATABASE,
              paramKey: key,
              key: key,
              encode: "",
              md5Encode:"",
              value: value,
              inLock: false
            }
            tempArr.push(obj);
          }
        }
      })
      this.dataSource = tempArr;
    },
    /*参数类型改变*/
    paramTypeChange(e,record){
      this.encodeTypeValue = ""
      if (e == this.paramTypeEnum.CALL) {
        record.encode = this.encodeTypeEnum.URLENCODED
        this.encodeTypeValue = this.encodeTypeEnum.URLENCODED
      }
    },
    /*
    * 数据库字段改变
    * */
    dbKeysChange(e,record) {
      if (record.key == 'ua') {
        record.encode = this.encodeTypeEnum.URLENCODED
      }
    },
    /*编码方式改变*/
    encodeChange(e,record) {
      record.md5Encode = "";
      record.encode = "";
      if (e == this.encodeTypeEnum.MD5LOW) {
        record.encode = "md5"
        record.md5Encode = this.encodeTypeEnum.MD5LOW
      }else if (e == this.encodeTypeEnum.MD5UP) {
        record.encode = "md5"
        record.md5Encode = this.encodeTypeEnum.MD5UP
      }else {
        record.encode = this.encodeTypeEnum.URLENCODED
      }
    },
    /*
    * 锁定参数，即改参数固定
    * */
    lockParam(item) {
      item.inLock = !item.inLock;
      if (item.inLock) {
        if (this.submit.url.indexOf(item.paramKey) < 0) {
          var appendType = "&";
          if (this.submit.url.indexOf("?") < 0) {
            appendType = "?"
          }
          this.submit.url = this.submit.url + appendType + item.paramKey + "=" + item.value
        }
      }else {
        if (this.submit.url.indexOf(item.paramKey) >= 0) {
          var splitChar = item.paramKey + "=";
          var arr = this.submit.url.split(splitChar)
          if (arr.length == 2) {
            var main = arr[0];
            var sub = arr[1];
            var firstAppdLocation = sub.indexOf("&");
            if (firstAppdLocation >= 0) {
              sub = sub.substring(firstAppdLocation + 1)
            }else {
              sub = "";
            }
            main = main + sub;
            var lastChar = main.substring(main.length - 1,main.length);
            console.log("===========:::",lastChar)
            if (lastChar == '&' || lastChar == '?') {
              main = main.substring(0,main.length - 1);
            }
            this.submit.url = main;
          }
        }
      }
    },
    /*
    * 删除参数
    * */
    deleteParam(item,index) {
      console.log("===========::",index)
    },
    /*保存链接*/
    saveLink() {
      // console.log("================",this.)
    }
  }
}
</script>

<style scoped>
.input-btn {
  width: 100px;
}
.type-item-title {
  width: 120px;
}
.key-input {
  width: 180px;
}
.m-table {
  /deep/.ant-table-thead > tr > th {
    padding: 7px 5px;
    border: 1px solid lightslategray;
  }
  /deep/.ant-table-tbody > tr > td{
    padding: 7px 5px;
    border-bottom: 1px solid lightslategray;
  }
}
</style>